<template>
  <div style="width:360px;margin:0 auto;">
    <a-card>
      <template #title>
        <div class="tac">请您登录</div>
      </template>
      <a-form>
        <a-form-item>
          <a-input
            v-model.trim="username"
            size="large"
            type="text"
            placeholder="用户名"
          >
            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-input-password
            @keyup.enter="handleLogin()"
            v-model.trim="password"
            size="large"
            placeholder="密码"
          >
            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
          </a-input-password>
        </a-form-item>

        <a-form-item v-if="showCaptcha">
          <a-row :gutter="10">
            <a-col span="16">
              <a-input
                v-model.trim="captcha"
                size="large"
                type="text"
                placeholder="请输入验证码"
                @pressEnter="handleLogin"
              >
                <a-icon slot="prefix" type="picture" :style="{ color: 'rgba(0,0,0,.25)' }"/>
              </a-input>
            </a-col>
            <a-col span="8">
              <img @click="getCaptcha()" class="wfull h40 cpt pos-rlt" style="top:-2px;" :src="`data:image/png;base64,${captchaImg}`"/>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item>
          <a-button
            size="large"
            type="primary"
            style="width:100%;"
            :loading="doing"
            :disabled="doing"
            @click="handleLogin"
          >登录</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      showCaptcha: true,
      doing: false,
      username: '',
      password: '',
      captcha: '',
      captchaSign: '',
      captchaImg: ''
    }
  },
  mounted () {
    this.getCaptcha()
  },
  methods: {
    ...mapActions(['login']),
    handleLogin () {
      if (this.username.length === 0) {
        this.$warning({ title: '请输入用户名' })
        return
      }
      if (this.password.length === 0) {
        this.$warning({ title: '请输入密码' })
        return
      }
      if (this.showCaptcha) {
        if (this.captcha.length === 0) {
          this.$warning({ title: '请输入验证码' })
          return
        }
      }
      this.doing = true
      if (!this.showCaptcha) {
        this.login(
          {
            username: this.username,
            password: this.genPwd(this.password)
          })
          .then((res) => this.loginSuccess(res))
          .catch(() => this.loginError())
          .finally(() => {
            this.doing = false
          })
      } else {
        this.$http.get('zg-system/un/captcha/validate', { sign: this.captchaSign, captcha: this.captcha }, data => {
          if (!data) {
            this.doing = false
            this.$warning({ title: '请输入正确的验证码' })
          } else {
            this.login(
              {
                username: this.username,
                password: this.genPwd(this.password)
              })
              .then((res) => this.loginSuccess(res))
              .catch(() => this.loginError())
              .finally(() => {
                this.doing = false
              })
          }
        })
      }
    },
    getCaptcha () {
      this.$http.get('zg-system/un/captcha/create', {}, data => {
        this.captchaImg = data[1]
        this.captchaSign = data[0]
      })
    },
    loginSuccess (res) {
      if (res && res.code === 1) {
        window.location.reload()
        // this.$router.push({ path: '/' })
      }
    },
    loginError () {
      this.$notification.error({
        message: '错误',
        description: '请求出现错误，请稍后再试',
        duration: 2
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
